<template>
  <div>
    <ocean :use="form"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { useForm } from '@/ocean';
import { HealthAPI, GlobalAPI } from '@/app/api';
import { NUpload } from 'naive-ui';
import { required } from '@/utils/rules';
type Model = {
  name: string;
  images: string;
  unit: string;
  kcal: string;
  type: number;
}

let props = defineProps<{
  row?: Model
}>()

let { action, headers } = GlobalAPI.uploadFile();

let form = useForm<Model>();
form.item('食品名称', 'name', { rule: [required()] }).input();
form.item('重量（克）', 'unit').inputNumber();
form.item('热量（kcal)', 'kcal').inputNumber();
form.item('食品图片', 'images', { rule: [required()] }).define(() => <NUpload
  action={action}
  headers={headers}
  listType="image-card"
  max={1}
  accept="image/*"
  onFinish={(res) => onUploaded(res)}
></NUpload>);

const onUploaded = (res) => {
  const r = JSON.parse(res.event.target.response)
  form.model.images = r.data;
}

let submitAPI = HealthAPI.add;

const submit = () => {
  form.model.type = 1;
  return form.validate().then(() => {
    return submitAPI(form.model);
  })
}

defineExpose({ submit });
</script>